import { useCommentLoop } from "@/stores/comment";
import { defineComponent } from "vue";
import styles from './styles.module.css';
import { showToast } from "@/utils/utils";

const Input = defineComponent({
    setup(_props, _ctx) {
        const loop = useCommentLoop();
        return () => {
            return (
                <div >

                    <el-row class={styles.inputBox}>
                        <el-col span={3} class="app-text">账号模式:</el-col>
                        &nbsp;
                        <el-col span={5}>
                            <el-select v-model={loop.accountType} size="small" placeholder="请选择">
                                <el-option
                                    label="顺序循环"
                                    value={0}>
                                </el-option>
                                <el-option
                                    label="随机循环"
                                    value={1}>
                                </el-option>
                            </el-select>
                        </el-col>
                        <el-col span={3} class="app-text">&nbsp;&nbsp;内容模式:</el-col>
                        &nbsp;
                        <el-col span={5}>
                            <el-select v-model={loop.contentType} size="small" placeholder="请选择">
                                <el-option
                                    label="顺序循环"
                                    value={0}>
                                </el-option>
                                <el-option
                                    label="随机循环"
                                    value={1}>
                                </el-option>
                            </el-select>
                        </el-col>
                        <el-col span={2} class="app-text">&nbsp;&nbsp;间隔:</el-col> &nbsp;
                        <el-col span={4}><el-input-number max={10} min={1} style="width:100%;" v-model={loop.time} size="small" step={1} step-strictly></el-input-number></el-col>
                        <el-col span={1} class="app-text">&nbsp;秒</el-col>

                    </el-row>
                </div>

            );
        }
    },
});

export default defineComponent({
    setup(_props, _ctx) {
        const loop = useCommentLoop();
        return () => {
            return (
                <div class={['app-wrap app-wrap-column', styles.app]}>
                    <el-row class={styles.inputBox}>
                        <el-col class={styles.inputButton} span={5} >
                            <el-upload
                                class="upload-demo"
                                accept=".txt"
                                before-upload={(file: any) => {
                                    const text = window.api.readFileSync(file.path);
                                    if (!text) {
                                        return showToast('没有读取到文本内容');
                                    }
                                    loop.updateContent(text);
                                    return false;
                                }}
                                show-file-list={false}>
                                <el-button size="small" type="primary">导入发言内容</el-button>
                            </el-upload>

                        </el-col>
                        <el-col span={4} class={styles.inputText}>
                            <el-button size="small" type="primary" onClick={() => {
                                if (loop.isRun) {
                                    loop.stop();
                                } else {
                                    loop.start();
                                }
                            }}>{
                                    loop.isRun ? '停止发言' : '开始发言'
                                }</el-button>
                        </el-col>
                        <el-col span={12} class="app-text">发言内容每行一条，每条不能超过30个字</el-col>
                    </el-row>
                    <div class="app-divider-10"></div>
                    <el-input
                        style="width:100%;"
                        type="textarea"
                        size="small"
                        placeholder="请输入发言内容,容每行一条，每条不能超过30个字"
                        v-model={loop.content}
                        autosize={{ minRows: 12, maxRows: 12 }} ></el-input>
                    <div class="app-divider-10"></div>
                    <Input></Input>
                </div >

            );
        }
    },
});
